<template>
  <div class="example">
    <transition name="fade">
      <div class="box" v-show="isShow"></div>
    </transition>
    <div class="btn">
      <button @click="handleClick">{{ isShow ? '隐藏' : '显示' }}</button>
    </div>
  </div>
</template>

<script>
/**
 * 例子 - 多种属性同时过渡
 */

export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

<style lang="less" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-to
/* .fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
